<template>
 <div id="fuHh">
  212142
  <!-- <Btn @on-click="getBtn" text="函数式编程"> -->
  <Btn @on-click="getBtn" >
    <template  #default>
     1234
    </template>
  </Btn>
</div>
</template>
<script setup lang='ts'>

import { createVNode, render } from 'vue';

const div = createVNode('div',{id:"foo"},'小满')
//正常选择vNode渲染
const addHtml = function():void{
  const fuh = document.getElementById('fuHh')
  render(div, fuh as HTMLElement)
  console.log(fuh)
}

//h函数渲染
type Props = {
  text?:string
} 
const Btn = (props: Props, ctx: any) => {
  return h('div', {
    class: ['rounded', 'bg-green-500', 'text-gray-50', 'text-center', 'p-1.5'],
    onClick:()=>{
      ctx.emit('on-click','我是函数式编程')
    }
  }, 
  ctx.slots.default()
  )
}
const getBtn = function(str:string){
console.log(str)
}

onMounted(()=>{
  addHtml()
})
</script>
<style scoped lang='less'>
</style>